<!--生产计划-->
<template>
  <div class="production-plan">
    <div class="page-header">
      <h2>生产计划</h2>
    </div>
    <div class="filter-container">
      <div class="filter-item">
        <label>计划编号</label>
        <input type="text" v-model="searchForm.planNo" placeholder="请输入计划编号">
      </div>
      <div class="filter-item">
        <label>来源类型</label>
        <select v-model="searchForm.sourceType">
          <option value="">全部</option>
          <option value="1">销售订单</option>
          <option value="2">库存备货</option>
          <option value="3">其他</option>
        </select>
      </div>
      <div class="filter-item">
        <label>状态</label>
        <select v-model="searchForm.planStatus">
          <option value="">全部</option>
          <option value="1">待下发工单</option>
          <option value="2">部分下发</option>
          <option value="3">已下发</option>
          <option value="4">已完成</option>
        </select>
      </div>
      <div class="filter-item">
        <label>加急状态</label>
        <select v-model="searchForm.urgentStatus">
          <option value="">全部</option>
          <option value="1">普通</option>
          <option value="2">加急</option>
          <option value="3">宽松</option>
        </select>
      </div>
      <div class="filter-item">
        <label>开始时间</label>
        <input type="date" v-model="searchForm.startTime">
      </div>
      <div class="filter-item">
        <label>结束时间</label>
        <input type="date" v-model="searchForm.endTime">
      </div>
      <div class="filter-item">
        <label>负责人</label>
        <input type="text" v-model="searchForm.username" placeholder="请输入负责人用户名">
      </div>
      <div class="actions">
        <button class="btn btn-primary" @click="showAddDialog">新建</button>
        <button class="btn btn-search" @click="searchPlans">搜索</button>
        <button class="btn btn-reset" @click="resetSearch">重置</button>
      </div>
    </div>

    <div class="table-container">
      <table class="data-table">
        <thead>
          <tr>
            <th><input type="checkbox" v-model="allSelected"></th>
            <th>计划编号</th>
            <th>计划状态</th>
            <th>来源类型</th>
            <th>产品个数</th>
            <th>生产数量</th>
            <th>加急状态</th>
            <th>工单数量</th>
            <th>已完工数量</th>
            <th>生产总进度（%）</th>
            <th>计划开始时间</th>
            <th>计划结束时间</th>
            <th>负责人</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in plans" :key="index">
            <td><input type="checkbox" v-model="item.selected"></td>
            <td class="plan-number" @click="viewDetail(item)">{{ item.planNo }}</td>
            <td><span :class="statusClass(item.planStatus)">{{ getStatusText(item.planStatus) }}</span></td>
            <td>{{ getSourceTypeText(item.sourceType) }}</td>
            <td>{{ item.productCount }}</td>
            <td>{{ item.productionQuantity }}</td>
            <td><span :class="urgencyClass(item.urgentStatus)">{{ getUrgentStatusText(item.urgentStatus) }}</span></td>
            <td>{{ item.workOrderCount }}</td>
            <td>{{ item.completedQuantity }}</td>
            <td>{{ item.progress || 0 }}%</td>
            <td>{{ formatDate(item.planStartTime) }}</td>
            <td>{{ formatDate(item.planEndTime) }}</td>
            <td>{{ item.username || '-' }}</td>
            <td>
              <button class="btn btn-edit" @click="editPlan(item)">编辑</button>
              <button class="btn btn-delete" @click="deletePlan(item)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="table-footer">
        <div class="footer-actions">
          <input type="checkbox" id="select-all-footer" v-model="allSelected">
          <label for="select-all-footer">全选</label>
          <button class="btn btn-export" @click="exportData">导出</button>
          <button class="btn btn-delete" @click="batchDelete" v-if="selectedPlans.length > 0">批量删除</button>
        </div>
        <div class="pagination">
          <button @click="changePage(currentPage - 1)" :disabled="currentPage <= 1">&lt;</button>
          <button 
            v-for="page in visiblePages" 
            :key="page" 
            :class="{ active: page === currentPage }"
            @click="changePage(page)"
          >
            {{ page }}
          </button>
          <button @click="changePage(currentPage + 1)" :disabled="currentPage >= totalPages">&gt;</button>
          <span>{{ pageSize }}条/页</span>
        </div>
      </div>
    </div>

    <!-- 添加/编辑对话框 -->
    <div v-if="showDialog" class="dialog-overlay" @click="closeDialog">
      <div class="dialog-content" @click.stop>
        <div class="dialog-header">
          <h3>{{ isEdit ? '编辑生产计划' : '新建生产计划' }}</h3>
          <button class="btn-close" @click="closeDialog">&times;</button>
        </div>
        <div class="dialog-body">
          <form @submit.prevent="submitForm">
            <div class="form-row">
              <div class="form-group">
                <label>计划编号</label>
                <input type="text" v-model="form.planNo" :disabled="isEdit" required>
              </div>
              <div class="form-group">
                <label>计划状态</label>
                <select v-model="form.planStatus" required>
                  <option value="1">待下发工单</option>
                  <option value="2">部分下发</option>
                  <option value="3">已下发</option>
                  <option value="4">已完成</option>
                </select>
              </div>
            </div>
            <div class="form-row">
              <div class="form-group">
                <label>来源类型</label>
                <select v-model="form.sourceType" required>
                  <option value="1">销售订单</option>
                  <option value="2">库存备货</option>
                  <option value="3">其他</option>
                </select>
              </div>
              <div class="form-group">
                <label>加急状态</label>
                <select v-model="form.urgentStatus" required>
                  <option value="1">普通</option>
                  <option value="2">加急</option>
                  <option value="3">宽松</option>
                </select>
              </div>
            </div>
            <div class="form-row">
              <div class="form-group">
                <label>产品个数</label>
                <input type="number" v-model="form.productCount" required>
              </div>
              <div class="form-group">
                <label>生产数量</label>
                <input type="number" v-model="form.productionQuantity" required>
              </div>
            </div>
            <div class="form-row">
              <div class="form-group">
                <label>计划开始时间</label>
                <input type="date" v-model="form.planStartTime" required>
              </div>
              <div class="form-group">
                <label>计划结束时间</label>
                <input type="date" v-model="form.planEndTime" required>
              </div>
            </div>
            <div class="form-row">
              <div class="form-group">
                <label>负责人用户名</label>
                <input type="text" v-model="form.username">
              </div>
              <div class="form-group">
                <label>备注</label>
                <textarea v-model="form.remark" rows="3"></textarea>
              </div>
            </div>
            <div class="form-actions">
              <button type="button" class="btn btn-cancel" @click="closeDialog">取消</button>
              <button type="submit" class="btn btn-primary">保存</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- 详情对话框 -->
    <div v-if="showDetailDialog" class="dialog-overlay" @click="closeDetailDialog">
      <div class="dialog-content detail-dialog" @click.stop>
        <div class="dialog-header">
          <h3>生产计划详情</h3>
          <button class="btn-close" @click="closeDetailDialog">&times;</button>
        </div>
        <div class="dialog-body">
          <div class="detail-content" v-if="currentPlan">
            <div class="detail-row">
              <span class="label">计划编号：</span>
              <span class="value">{{ currentPlan.planNo }}</span>
            </div>
            <div class="detail-row">
              <span class="label">计划状态：</span>
              <span class="value" :class="statusClass(currentPlan.planStatus)">{{ getStatusText(currentPlan.planStatus) }}</span>
            </div>
            <div class="detail-row">
              <span class="label">来源类型：</span>
              <span class="value">{{ getSourceTypeText(currentPlan.sourceType) }}</span>
            </div>
            <div class="detail-row">
              <span class="label">加急状态：</span>
              <span class="value" :class="urgencyClass(currentPlan.urgentStatus)">{{ getUrgentStatusText(currentPlan.urgentStatus) }}</span>
            </div>
            <div class="detail-row">
              <span class="label">产品个数：</span>
              <span class="value">{{ currentPlan.productCount }}</span>
            </div>
            <div class="detail-row">
              <span class="label">生产数量：</span>
              <span class="value">{{ currentPlan.productionQuantity }}</span>
            </div>
            <div class="detail-row">
              <span class="label">工单数量：</span>
              <span class="value">{{ currentPlan.workOrderCount }}</span>
            </div>
            <div class="detail-row">
              <span class="label">已完工数量：</span>
              <span class="value">{{ currentPlan.completedQuantity }}</span>
            </div>
            <div class="detail-row">
              <span class="label">生产总进度：</span>
              <span class="value">{{ currentPlan.progress || 0 }}%</span>
            </div>
            <div class="detail-row">
              <span class="label">计划开始时间：</span>
              <span class="value">{{ formatDate(currentPlan.planStartTime) }}</span>
            </div>
            <div class="detail-row">
              <span class="label">计划结束时间：</span>
              <span class="value">{{ formatDate(currentPlan.planEndTime) }}</span>
            </div>
            <div class="detail-row">
              <span class="label">负责人：</span>
              <span class="value">{{ currentPlan.username || '-' }}</span>
            </div>
            <div class="detail-row" v-if="currentPlan.remark">
              <span class="label">备注：</span>
              <span class="value">{{ currentPlan.remark }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { productionPlanApi } from '@/api/productionPlan'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  name: 'ProductionPlan',
  data() {
    return {
      // 数据列表
      plans: [],
      loading: false,
      
      // 搜索表单
      searchForm: {
        planNo: '',
        planStatus: '',
        sourceType: '',
        urgentStatus: '',
        startTime: '',
        endTime: '',
        username: ''
      },
      
      // 分页信息
      currentPage: 1,
      pageSize: 10,
      total: 0,
      totalPages: 0,
      
      // 对话框状态
      showDialog: false,
      showDetailDialog: false,
      isEdit: false,
      currentPlan: null,
      
      // 表单数据
      form: {
        planNo: '',
        planStatus: '1',
        sourceType: '1',
        urgentStatus: '1',
        productCount: 0,
        productionQuantity: 0,
        planStartTime: '',
        planEndTime: '',
        username: '',
        remark: ''
      }
    };
  },
  computed: {
    allSelected: {
      get() {
        return this.plans.length > 0 && this.plans.every(item => item.selected);
      },
      set(value) {
        this.plans.forEach(item => {
          item.selected = value;
        });
      }
    },
    selectedPlans() {
      return this.plans.filter(item => item.selected);
    },
    visiblePages() {
      const pages = [];
      const start = Math.max(1, this.currentPage - 2);
      const end = Math.min(this.totalPages, this.currentPage + 2);
      for (let i = start; i <= end; i++) {
        pages.push(i);
      }
      return pages;
    }
  },
  mounted() {
    // 临时使用模拟数据来测试页面功能
    this.loadMockData();
    // this.loadPlans();
  },
  methods: {
    // 加载生产计划列表
    async loadPlans() {
      this.loading = true;
      try {
        const params = {
          current: this.currentPage,
          size: this.pageSize,
          ...this.searchForm
        };
        
        // 处理空值参数
        Object.keys(params).forEach(key => {
          if (params[key] === '' || params[key] === null || params[key] === undefined) {
            delete params[key];
          }
        });
        
        const response = await productionPlanApi.getProductionPlansPage(params);
        console.log('API响应数据:', response);
        
        // 处理不同的响应数据结构
        let responseData = response.data;
        if (responseData && responseData.data) {
          responseData = responseData.data;
        }
        
        this.plans = responseData.records || responseData.list || responseData || [];
        this.total = responseData.total || 0;
        this.totalPages = responseData.pages || Math.ceil(this.total / this.pageSize);
        
        console.log('处理后的数据:', this.plans);
        
        // 为每个计划添加选中状态
        this.plans = this.plans.map(plan => ({
          ...plan,
          selected: false
        }));
      } catch (error) {
        console.error('API请求失败:', error);
        ElMessage.error('加载数据失败：' + error.message);
        
        // 如果API失败，使用模拟数据
        this.loadMockData();
      } finally {
        this.loading = false;
      }
    },
    
    // 搜索
    searchPlans() {
      this.currentPage = 1;
      // 在模拟数据模式下，重新加载模拟数据
      this.loadMockData();
      // this.loadPlans();
    },
    
    // 重置搜索
    resetSearch() {
      this.searchForm = {
        planNo: '',
        planStatus: '',
        sourceType: '',
        urgentStatus: '',
        startTime: '',
        endTime: '',
        username: ''
      };
      this.currentPage = 1;
      // 在模拟数据模式下，重新加载模拟数据
      this.loadMockData();
      // this.loadPlans();
    },
    
    // 分页切换
    changePage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.currentPage = page;
        // 在模拟数据模式下，重新加载模拟数据
        this.loadMockData();
        // this.loadPlans();
      }
    },
    
    // 显示添加对话框
    showAddDialog() {
      this.isEdit = false;
      this.form = {
        planNo: '',
        planStatus: '1',
        sourceType: '1',
        urgentStatus: '1',
        productCount: 0,
        productionQuantity: 0,
        planStartTime: '',
        planEndTime: '',
        username: '',
        remark: ''
      };
      this.showDialog = true;
    },
    
    // 编辑计划
    editPlan(plan) {
      this.isEdit = true;
      this.form = { ...plan };
      this.showDialog = true;
    },
    
    // 查看详情
    async viewDetail(plan) {
      try {
        // 直接使用列表中的数据，避免API调用
        this.currentPlan = { ...plan };
        this.showDetailDialog = true;
        
        // 如果需要从API获取最新数据，可以取消注释下面的代码
        // const response = await productionPlanApi.getProductionPlanById(plan.id);
        // this.currentPlan = response.data;
      } catch (error) {
        ElMessage.error('获取详情失败：' + error.message);
      }
    },
    
    // 删除计划
    async deletePlan(plan) {
      try {
        await ElMessageBox.confirm('确定要删除该生产计划吗？', '确认删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });
        
        // 模拟删除操作
        this.plans = this.plans.filter(p => p.id !== plan.id);
        this.total = this.plans.length;
        ElMessage.success('删除成功');
        
        // 如果需要真实API调用，可以取消注释下面的代码
        // await productionPlanApi.deleteProductionPlan(plan.planNo);
        // this.loadPlans();
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('删除失败：' + error.message);
        }
      }
    },
    
    // 批量删除
    async batchDelete() {
      if (this.selectedPlans.length === 0) {
        ElMessage.warning('请选择要删除的计划');
        return;
      }
      
      try {
        await ElMessageBox.confirm(`确定要删除选中的 ${this.selectedPlans.length} 个生产计划吗？`, '确认批量删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });
        
        // 模拟批量删除操作
        const selectedIds = this.selectedPlans.map(plan => plan.id);
        this.plans = this.plans.filter(p => !selectedIds.includes(p.id));
        this.total = this.plans.length;
        ElMessage.success('批量删除成功');
        
        // 如果需要真实API调用，可以取消注释下面的代码
        // const deletePromises = this.selectedPlans.map(plan => 
        //   productionPlanApi.deleteProductionPlan(plan.planNo)
        // );
        // await Promise.all(deletePromises);
        // this.loadPlans();
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('批量删除失败：' + error.message);
        }
      }
    },
    
    // 提交表单
    async submitForm() {
      try {
        if (this.isEdit) {
          // 模拟更新操作
          const index = this.plans.findIndex(p => p.id === this.form.id);
          if (index !== -1) {
            this.plans[index] = { ...this.form };
          }
          ElMessage.success('更新成功');
        } else {
          // 模拟添加操作
          const newPlan = {
            ...this.form,
            id: Date.now(), // 简单的ID生成
            workOrderCount: 0,
            completedQuantity: 0,
            progress: 0
          };
          this.plans.unshift(newPlan);
          this.total = this.plans.length;
          ElMessage.success('添加成功');
        }
        this.closeDialog();
        
        // 如果需要真实API调用，可以取消注释下面的代码
        // if (this.isEdit) {
        //   await productionPlanApi.updateProductionPlan(this.form);
        // } else {
        //   await productionPlanApi.addProductionPlan(this.form);
        // }
        // this.loadPlans();
      } catch (error) {
        ElMessage.error((this.isEdit ? '更新' : '添加') + '失败：' + error.message);
      }
    },
    
    // 关闭对话框
    closeDialog() {
      this.showDialog = false;
      this.form = {
        planNo: '',
        planStatus: '1',
        sourceType: '1',
        urgentStatus: '1',
        productCount: 0,
        productionQuantity: 0,
        planStartTime: '',
        planEndTime: '',
        username: '',
        remark: ''
      };
    },
    
    // 关闭详情对话框
    closeDetailDialog() {
      this.showDetailDialog = false;
      this.currentPlan = null;
    },
    
    // 导出数据
    exportData() {
      ElMessage.info('导出功能开发中...');
    },
    
    // 状态样式类
    statusClass(status) {
      switch (status) {
        case 1: return 'status-orange';
        case 2: return 'status-blue';
        case 3: return 'status-red';
        case 4: return 'status-gray';
        default: return '';
      }
    },
    
    // 加急状态样式类
    urgencyClass(status) {
      if (status === 2) return 'urgency-red';
      return '';
    },
    
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        1: '待下发工单',
        2: '部分下发',
        3: '已下发',
        4: '已完成'
      };
      return statusMap[status] || '未知';
    },
    
    // 获取来源类型文本
    getSourceTypeText(type) {
      const typeMap = {
        1: '销售订单',
        2: '库存备货',
        3: '其他'
      };
      return typeMap[type] || '未知';
    },
    
    // 获取加急状态文本
    getUrgentStatusText(status) {
      const statusMap = {
        1: '普通',
        2: '加急',
        3: '宽松'
      };
      return statusMap[status] || '未知';
    },
    
    // 格式化日期
    formatDate(date) {
      if (!date) return '-';
      return new Date(date).toLocaleDateString('zh-CN');
    },
    
    // 加载模拟数据
    loadMockData() {
      console.log('使用模拟数据');
      this.plans = [
        { 
          id: 1,
          planNo: 'SCJH203506190003', 
          planStatus: 1, 
          sourceType: 1, 
          productCount: 2, 
          productionQuantity: 2000, 
          urgentStatus: 1, 
          workOrderCount: 8, 
          completedQuantity: 0,
          progress: 0,
          planStartTime: '2024-01-01',
          planEndTime: '2024-01-15',
          username: '张三',
          remark: '测试计划1'
        },
        { 
          id: 2,
          planNo: 'SCJH203506190005', 
          planStatus: 2, 
          sourceType: 2, 
          productCount: 3, 
          productionQuantity: 3000, 
          urgentStatus: 1, 
          workOrderCount: 12, 
          completedQuantity: 500,
          progress: 17,
          planStartTime: '2024-01-02',
          planEndTime: '2024-01-16',
          username: '李四',
          remark: '测试计划2'
        },
        { 
          id: 3,
          planNo: 'SCJH203506190006', 
          planStatus: 3, 
          sourceType: 1, 
          productCount: 5, 
          productionQuantity: 5000, 
          urgentStatus: 2, 
          workOrderCount: 16, 
          completedQuantity: 1050,
          progress: 21,
          planStartTime: '2024-01-03',
          planEndTime: '2024-01-17',
          username: '王五',
          remark: '测试计划3'
        },
        { 
          id: 4,
          planNo: 'SCJH203506190023', 
          planStatus: 4, 
          sourceType: 2, 
          productCount: 8, 
          productionQuantity: 1000, 
          urgentStatus: 1, 
          workOrderCount: 20, 
          completedQuantity: 1000,
          progress: 100,
          planStartTime: '2024-01-04',
          planEndTime: '2024-01-18',
          username: '赵六',
          remark: '测试计划4'
        },
        { 
          id: 5,
          planNo: 'SCJH203506190018', 
          planStatus: 4, 
          sourceType: 3, 
          productCount: 9, 
          productionQuantity: 6000, 
          urgentStatus: 3, 
          workOrderCount: 24, 
          completedQuantity: 6000,
          progress: 100,
          planStartTime: '2024-01-05',
          planEndTime: '2024-01-19',
          username: '钱七',
          remark: '测试计划5'
        }
      ].map(plan => ({
        ...plan,
        selected: false
      }));
      
      this.total = this.plans.length;
      this.totalPages = 1;
    }
  }
};
</script>

<style scoped>
.production-plan { background-color: #f7f8fa; padding: 20px; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.page-header h2 { font-size: 20px; color: #333; }
.filter-container { background-color: #fff; padding: 20px; border-radius: 8px; margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.filter-item { display: flex; align-items: center; gap: 10px; }
.filter-item label { font-size: 14px; color: #666; min-width: 80px; }
.filter-item input, .filter-item select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; width: 150px; }
.actions { display: flex; gap: 10px; margin-left: auto; }
.btn { padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; }
.btn-primary { background-color: #3b82f6; color: white; }
.btn-search { background-color: #3b82f6; color: white; }
.btn-reset { background-color: #f0f0f0; color: #333; border: 1px solid #ddd; }
.btn-edit { background-color: #10b981; color: white; padding: 4px 8px; font-size: 12px; }
.btn-delete { background-color: #ef4444; color: white; padding: 4px 8px; font-size: 12px; }
.btn-cancel { background-color: #f0f0f0; color: #333; border: 1px solid #ddd; }
.btn-export { background-color: #fff; color: #333; border: 1px solid #ddd; }
.table-container { background-color: #fff; padding: 20px; border-radius: 8px; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 12px; text-align: left; border-bottom: 1px solid #f0f0f0; }
.data-table th { background-color: #f8f9fa; font-weight: 600; }
.plan-number { color: #3b82f6; cursor: pointer; text-decoration: underline; }
.plan-number:hover { color: #1d4ed8; }
.status-orange { color: #f97316; font-weight: 500; }
.status-blue { color: #3b82f6; font-weight: 500; }
.status-red { color: #ef4444; font-weight: 500; }
.status-gray { color: #9ca3af; font-weight: 500; }
.urgency-red { color: #ef4444; font-weight: 500; }
.table-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; }
.footer-actions { display: flex; align-items: center; gap: 10px; }
.pagination { display: flex; align-items: center; gap: 5px; }
.pagination button { padding: 8px 12px; border: 1px solid #ddd; background-color: #fff; cursor: pointer; border-radius: 4px; }
.pagination button.active { background-color: #3b82f6; color: white; border-color: #3b82f6; }
.pagination button:disabled { opacity: 0.5; cursor: not-allowed; }

/* 对话框样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialog-content {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}

.detail-dialog {
  max-width: 500px;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.dialog-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.btn-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-close:hover {
  color: #333;
}

.dialog-body {
  padding: 20px;
}

/* 表单样式 */
.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
  font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

/* 详情样式 */
.detail-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.detail-row {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-row .label {
  font-weight: 500;
  color: #666;
  min-width: 120px;
  font-size: 14px;
}

.detail-row .value {
  color: #333;
  font-size: 14px;
  flex: 1;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .filter-container {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filter-item {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filter-item input,
  .filter-item select {
    width: 100%;
  }
  
  .actions {
    margin-left: 0;
    justify-content: center;
  }
  
  .form-row {
    flex-direction: column;
    gap: 15px;
  }
  
  .table-container {
    overflow-x: auto;
  }
  
  .data-table {
    min-width: 800px;
  }
}
</style>
